<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星案例</title>

    <style>
        ul{
            overflow: hidden;
        }
        li{
            float: left;
            font-size: 50px;
            list-style: none;
            cursor: pointer;
        }
    </style>

    <script src="../../libs/jquery3_1_1.min.js"></script>
    <script>
        $(function () {
            var wjx_sel = '★',wjx_none='☆';
            $('ul').on('mouseenter','li',function () {
                $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            }).on('mouseleave',function () {
                $(this).children().text(wjx_none);
                $('.click').text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            }).on('click','li',function () {
                $(this).addClass("click").siblings().removeClass("click");
            })
        });
    </script>
</head>
<body>
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
</body>
</html>